<template>
  <view>
    <view class="container">
      <!-- 搜索栏组件 -->
      <SearchBar 
        :location="location" 
        :isLoggedIn="isLoggedIn"
        @chooseLocation="chooseLocation"
        @goSearch="goSearch"
        @goLogin="goLogin"
      />
      
      <!-- 轮播图组件 -->
      <BannerSwiper 
        :bannerList="bannerList"
        @bannerClick="handleBannerClick"
      />
      
      <!-- 导航菜单组件 -->
      <NavMenu 
        :navList="navList"
        @navClick="handleNavClick"
      />
      
      <!-- 秒杀模块组件 -->
      <SeckillSection 
        :seckillGoods="seckillGoods"
        @goToSeckill="goToSeckill"
        @goToDetail="goToDetail"
      />
      
      <!-- 商品列表组件 -->
      <GoodsList 
        :goodsList="goodsList"
        @goToDetail="goToDetail"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import SearchBar from './components/SearchBar.vue'
import BannerSwiper from './components/BannerSwiper.vue'
import NavMenu from './components/NavMenu.vue'
import SeckillSection from './components/SeckillSection.vue'
import GoodsList from './components/GoodsList.vue'

// 模拟数据
const location = ref('北京')
const isLoggedIn = ref(false)

const bannerList = ref([
  { 
    id: 1, 
    image: 'https://img10.360buyimg.com/pop/s1180x940_jfs/t1/117573/18/36552/72078/64f70371F8f9d6e7b/0bef438474c4aa20.jpg.webp', 
    link: '/pages/activity/1' 
  },
  { 
    id: 2, 
    image: 'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/100044353470/FocusFullshop/CkRqZnMvdDEvMTQzNzIzLzIxLzM2NTI0Lzk5NDc4LzY0ZjZmZmVkRjc5ZWQ5ZmE5LzliZWJhOGRhNzM2ZjA5ZGEucG5nEgkzLXR5XzBfNTQwAjjui3pCGQoV5LiA5Liq5Lul5o6l5Y2V5Lu35qy+EAEYDTgE/cr/s/q:ek/resize,m_lfit,w_590,h_470/quality,q_90',
    link: '/pages/activity/2' 
  },
  { 
    id: 3, 
    image: 'https://imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2000366/10059961866388/FocusFullshop/CkNqZnMvdDEvMTQ5NzQzLzQwLzM2MjY5Lzk4NjY5LzY0ZjZmZmVkRjE0NzM5ZmJhLzliNjc4ZjVhZjJiZjFiNjgucG5nEgs0LXR5XzE4XzU0MAI47ot6/cr/s/q:ek/resize,m_lfit,w_590,h_470/quality,q_90',
    link: '/pages/activity/3' 
  },
])

const navList = ref([
  { 
    id: 1, 
    name: '京东超市', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png', 
    link: '/pages/ai/home' 
  },
  { 
    id: 2, 
    name: '数码电器', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png', 
    link: '/pages/ai/ws-chat' 
  },
  { 
    id: 3, 
    name: '京东服饰', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png', 
    link: '/pages/category/clothing' 
  },
  { 
    id: 4, 
    name: '京东生鲜', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png', 
    link: '/pages/category/fresh' 
  },
  { 
    id: 5, 
    name: '京东到家', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png', 
    link: '/pages/category/dj' 
  },
  { 
    id: 6, 
    name: '充值缴费', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png', 
    link: '/pages/category/charge' 
  },
  { 
    id: 7, 
    name: '9.9元拼', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png', 
    link: '/pages/category/nine' 
  },
  { 
    id: 8, 
    name: '领券', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png', 
    link: '/pages/category/coupon' 
  },
  { 
    id: 9, 
    name: '领金贴', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png', 
    link: '/pages/category/gold' 
  },
  { 
    id: 10, 
    name: 'PLUS会员', 
    icon: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png', 
    link: '/pages/category/plus' 
  },
])

const seckillGoods = ref([
  { 
    id: 1, 
    image: 'https://gw.alicdn.com/bao/uploaded/i1/2549841410/O1CN01OWYi8B1MeaQbDJHjH_!!0-item_pic.jpg',
    price: '4999',
    originalPrice: '5999',
    title: 'Apple iPhone 14 Pro 5G手机 暗紫色 256G',
    progress: 85,
    stock: 100,
    sold: 85,
    tag: '限时抢'
  },
  { 
    id: 2, 
    image: 'https://gw.alicdn.com/bao/uploaded/i4/2549841410/O1CN01KGzGXK1MeaQf2V5Oh_!!0-item_pic.jpg',
    price: '3999',
    originalPrice: '4599',
    title: '华为 Mate60 Pro 5G手机 雅川青 512G',
    progress: 100,
    stock: 200,
    sold: 200,
    tag: '已抢完'
  },
  { 
    id: 3, 
    image: 'https://gw.alicdn.com/bao/uploaded/i2/2549841410/O1CN01w1d2Fs1MeaQe3abQN_!!0-item_pic.jpg',
    price: '2999',
    originalPrice: '3599',
    title: '小米 13 Ultra 5G手机 黑色 512G',
    progress: 76,
    stock: 150,
    sold: 114,
    tag: '抢购中'
  },
  { 
    id: 4, 
    image: 'https://gw.alicdn.com/bao/uploaded/i1/2549841410/O1CN01Cq5hqp1MeaQe3bXmB_!!0-item_pic.jpg',
    price: '1999',
    originalPrice: '2599',
    title: 'OPPO Find X6 Pro 5G手机 墨黑 256G',
    progress: 88,
    stock: 80,
    sold: 70,
    tag: '热卖中'
  },
])

const goodsList = ref([
  {
    id: 1,
    image: 'https://img12.360buyimg.com/mobilecms/s500x500_jfs/t1/189093/36/39791/54811/649d4e36F5b0e6940/6b565595e8c4c209.jpg',
    title: 'OPPO Find X6 Pro',
    desc: '超感知影像旗舰',
    price: '4999',
    sold: '300'
  },
  {
    id: 2,
    image: 'https://img12.360buyimg.com/mobilecms/s500x500_jfs/t1/143075/17/35420/27154/64996aa5Fd005bce0/b3f2fa4e8b6a6ec2.jpg',
    title: '华为 Mate 60 Pro',
    desc: '麒麟9000 超感知徕卡影像',
    price: '6999',
    sold: '800'
  },
  {
    id: 3,
    image: 'https://img10.360buyimg.com/n2/s270x270_jfs/t1/108369/2/40341/47685/644a6fdeF66b2d26a/3af9410094c41c5b.jpg',
    title: '小米 13 Ultra',
    desc: '徕卡光学全焦段四摄',
    price: '5999',
    sold: '500'
  },
  {
    id: 4,
    image: 'https://img10.360buyimg.com/n2/s270x270_jfs/t1/95319/17/39483/56827/644a6fc9F48e86b9d/6bad19e8f1aedd36.jpg',
    title: 'vivo X90 Pro+',
    desc: '蔡司影像系统',
    price: '5699',
    sold: '400'
  },
  {
    id: 5,
    image: 'https://img10.360buyimg.com/n2/s270x270_jfs/t1/121006/10/35462/21753/644a6fdeF66b2d26a/3af9410094c41c5b.jpg',
    title: '三星 Galaxy S23 Ultra',
    desc: '2亿像素影像系统',
    price: '7999',
    sold: '600'
  }
])

// 事件处理函数
const chooseLocation = () => {
  // 实现定位选择
}

const goSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  })
}

const goLogin = () => {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

const handleBannerClick = (item) => {
  uni.navigateTo({
    url: item.link
  })
}

const handleNavClick = (item) => {
  uni.navigateTo({
    url: item.link
  })
}

const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/goods/detail?id=${item.id}`
  })
}

const goToSeckill = () => {
  uni.navigateTo({
    url: '/pages/seckill/index'
  })
}
</script>

<style>
/**index.wxss**/

.container {
  background-color: #fff;
  min-height: 100%;
  align-items: stretch;
  overflow-x: hidden;
  position: relative;
}

.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading .img {
  width: 90rpx;
  height: 90rpx;
}

.loading .text {
  margin-top: 20rpx;
  width: 100%;
  font-size: 24rpx;
  color: #999;
  text-align: center;
}

.qrcode-img {
  width: 600rpx;
  height: 600rpx;
}

.contact-wrap {
  position: fixed;
  z-index: 9;
  right: 30rpx;
  bottom: 60rpx;
  box-shadow: 2rpx 4rpx 10rpx #f1f1f1;
  color: #999;
  border-radius: 10rpx;
}

.contact-wrap .contact-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 130rpx;
  opacity: 0.9;
  background: #fff;
}

.contact-wrap .icon-mask {
  background: #000;
  opacity: 0.9;
}

.contact-wrap .contact-btn:after {
  border: none;
}

.contact-wrap .contact-btn .icon {
  width: 50rpx;
  height: 50rpx;
  margin: 0 auto;
  margin-top: 20rpx;
}

.contact-wrap .contact-btn .text {
  font-size: 22rpx;
  text-align: center;
}

.black-mask {
  width: 100%;
  height: 2000rpx;
  position: fixed;
  top: 0;
  left: 0;
  background: #333;
  opacity: 0.5;
  z-index: 99;
}

.mask {
  width: 100%;
  height: 1000rpx;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
</style>
